<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数防抖</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            margin: 200px auto;
            width: 500px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">数字大小为：0</div>
    <!-- <button id="btn">点击让数字加1</button> -->
    <script>
        var box = document.querySelector('#box')
        // var btn  = document.querySelector('#btn')
        var number = 0;

        function increment() {
            number++
            box.innerHTML = '数字大小为' + number;
            box.style.backgroundColor = 'rgb('+Math.floor(Math.random()*(180,255))+','+Math.floor(Math.random()*(180,255))+','+Math.floor(Math.random()*(180,255))+')';
        }
        /* 函数防抖
        handle:onmouseenter函数
        deplay:在最后一次鼠标进入方块内的1秒后数字自增1
    */
        function debunce(handle, deplay) {
            let time = null;
            return function () { // 创建闭包环境
                let self = this,
                    arg = arguments;
                clearTimeout(time);
                time = setTimeout(function () {
                    handle.apply(self, arg) //this 绑定
                }, deplay)
                console.log('现在鼠标移入'+number);
            }
           
        }
       
        
        box.onmouseenter = debunce(increment, 1000)
    </script>
</body>

</html>